<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="./lib/echarts.min.js"></script>

    <script>
     var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      
      const arr = [
          { name: "西兰花", price: 150 },
          { name: "西瓜", price: 230 },
          { name: "西葫芦", price: 224 },
          { name: "西北风", price: 34 },
          { name: "西红柿", price: 135 },
          { name: "土豆", price: 147 },
          { name: "秋刀鱼", price: 260 },
        ]
        
      let arrName=[]
      let arrPrice=[]
      arr.forEach(item=>{
        arrName.push(item.name)
        arrPrice.push(item.price)
      })
      option = {
        xAxis: {
          type: 'category',
          data: arrName,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: arrPrice,
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    </script>
</body>

</html>